<template>
  <div v-show="songUrl!=''">
    <div class="audio-play-container">
      <div class="click">
        <div class="img"><img :src="songInfo.al?.picUrl">
        </div>
        <div class="info">
          <span class="song-name">{{ songInfo?.name }}</span>
          <span class="division">-</span>
          <span class="ar-name">
            <template v-for="item in songInfo?.ar" :key="item.id"> {{ item?.name }}</template>

        </span>
        </div>
      </div>
      <span class="icon-yunhang iconfont size" @click="methods.playAudio" v-if="!store.state.index.isPlay"></span>
      <span class="icon-zanting iconfont size" v-else @click="methods.playAudio"></span>
      <span class="icon-gengduo iconfont" @click="changeShowSongList"></span>
      <audio
          :src="songUrl"
          id="audio"
          :autoplay="store.state.index.isPlay"
      >
      </audio>
    </div>
    <!-- 歌曲列表 -->
    <SongList class="song-list"></SongList>
    <!-- 歌曲详情 -->
    <SongDetail></SongDetail>
  </div>
</template>


<script setup>
import {computed, nextTick, onMounted} from "vue";
import SongList from '@/components/song/SongList.vue';

import SongDetail from '@/components/song/SongDetail.vue';
import {useStore} from "vuex";
import request from "@/utils/Request.js";
import methods from "../utils/methods.js";

const store = useStore();
// 歌曲信息
const songInfo = computed(() => store.state.index.songInfo);
// 歌曲地址
const songUrl = computed(() => store.state.index.songUrl);

const changeShowSongList = () => {
  let songList = document.querySelector('.song-list')
  songList.style.top = '0'
}
onMounted(() => {
  let click = document.querySelector('.click');
  let container = document.querySelector(".song-container");
  click.addEventListener('touchend', () => {
        container.style.top = '0';
      }
      ,
      false
  );
  if (songUrl.value == '') {
    // 获取每日推荐歌曲
    const getEverydayRecommendedSong = async () => {
      let result = await request.get("/recommend/songs");
      console.log('audio'+result)
      console.log(result)
      if (result.code === 200) {
        store.commit("setSongList", result.data.dailySongs)
        store.dispatch("changeSong", store.state.index.songList[0])
      }
    }
    getEverydayRecommendedSong();
  }

  // 获取歌曲时间
  nextTick(() => {
    let audio = document.getElementById('audio');
    setTimeout(() => {
      console.log(audio.duration)
      store.commit("SETCTIME",Math.round(audio.currentTime));
      store.commit("SETETIME",Math.round(audio.duration));
    },2000)

  })

})
</script>


<style scoped lang="scss">
.audio-play-container {
  position: fixed;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  z-index: 50;
  width: 100%;
  background: #fff;

  .click {
    display: flex;
    align-items: center;
    flex: 1;
  }

  .info {
    align-items: center;
    font-size: 14px;
    height: 20px;
    padding: 0 10px;
    overflow: hidden; /*内容溢出隐藏*/
    text-overflow: ellipsis; //*溢出的文本显示为...*/
    display: -webkit-box; /*将div转换为盒子模型*/
    -webkit-line-clamp: 1; /*设置div的文本为2行*/
    -webkit-box-orient: vertical; /*从顶部向底部垂直布置子元素*/
    .division {
      padding: 0 5px;
    }

    .ar-name {
      color: #666;
      font-size: 13px;
      line-height: 20px;
    }

    // 给名字增加伪元素
    .ar-name:not(:last-child)::after {
      content: "/";
    }
  }

  img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }

  .iconfont {
    display: block;
    font-size: 20px;
  }

  .size {
    font-size: 26px;
  }

  .icon-gengduo {
    padding-left: 15px;
  }


  //.ar-name::before {
  //
  //}
  //
  //.ar-name::before:first-child {
  //  content: "aaa";
  //}
}

.song-list {
  position: absolute;
  //top: 0;
  top: 100%;
  transition: top .3s;
  z-index: 999;
}
</style>
